<template>
  <Dialog
    class="edit-dialog"
    title="修改用户"
    :visible.sync="dialogVisible"
    @submit="submit"
  >
    <TreeTransfer
      class="tree-transfer"
      :title="['未选', '已选']"
      :from_data="fromDataList"
      :to_data="toDataList"
      :defaultProps="defaultProps"
      @addBtn="addBtn"
      @removeBtn="removeBtn"
      :renderContentLeft="renderContent"
      :renderContentRight="renderContent"
      node_key="uuid"
    >
    </TreeTransfer>
  </Dialog>
</template>

<script>
import { getUserList, inOrDelPowerUser, getPowerUserList } from "@/api/role";
import TreeTransfer from "el-tree-transfer";
export default {
  name: "EditUser",
  components: {
    TreeTransfer
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    roleInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      //选中--------------------------------------------
      fromDataList: [],
      //未选中--------------------------------------------
      toDataList: [],
      //对话框状态--------------------------------------------
      dialogVisible: this.visible,
      //树形控件配置--------------------------------------------
      defaultProps: {
        children: "child",
        label: "username"
      }
    };
  },

  watch: {
    //监听对话框状态--------------------------------------------
    dialogVisible(newVal) {
      this.$emit("update:visible", newVal);
    }
  },

  created() {
    this.getPowerUserList();
  },

  methods: {
    //获取全部权限列表--------------------------------------------
    async getUserList(arr = []) {
      const parmas = {
        page: 0,
        pageSize: 0
      };
      const res = await getUserList(parmas).catch(res => console.log(res));
      this.fromDataList = res.items.filter(
        item => arr.indexOf(item.uuid) == -1
      );
    },

    //获取该角色的用户列表--------------------------------------------
    async getPowerUserList() {
      this.toDataList = [];
      const params = {
        uuid: this.roleInfo.uuid
      };
      const res = await getPowerUserList(params).catch(res => console.log(res));
      const arr = [];
      res.items.forEach(item => {
        this.toDataList.push(item);
        arr.push(item.uuid);
      });
      this.getUserList(arr);
    },

    //添加--------------------------------------------
    addBtn(fromData, toData, obj) {
      this.inOrDelPowerUser(0, [...obj.keys]);
    },

    //删除--------------------------------------------
    removeBtn(fromData, toData, obj) {
      this.inOrDelPowerUser(1, [...obj.keys]);
    },

    //自定义节点内容--------------------------------------------
    renderContent(h, { node, data, store }) {
      return (
        <span>
          {data.username}-{data.phone}
        </span>
      );
    },

    inOrDelPowerUser(count, list) {
      const menuTree = this.$refs.menuTree;
      const data = {
        count,
        list,
        uuid: this.roleInfo.uuid
      };

      inOrDelPowerUser(data).then(res => {
        if (res.state == 100) {
          this.$message({ message: res.msg, type: "success" });
        }
      });
    },

    //确定提交--------------------------------------------
    submit() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.tree-transfer {
  min-width: 500px;
}
</style>
